@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600;800&display=swap');
:root {
    --background-color1:#0f274cf3;
    --secondary-color1: #E2B857;
    --secondary-color2:#0099CC;
   --background-color2:#111827;
    --text-color: #FFFFFF;
    --text2-color: #B0BEC5;
    --card-background--: #1B4965;
    --hover-color: #00B4D8;
   
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

body{

  background-color: var(--background-color1) !important;
  color: var(--text-color);
}
p{
  font-size: 15px;
}
.button4{
  border: 0px;
  display:block;
  position: relative !important;
  padding: 15px 40px;
  color: var(--text-color);
  background:transparent!important;
  font-size: 23px;
  cursor: pointer;
  overflow: hidden;

}
.button4 span{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:transparent!important;
  z-index:-1 !important;
  border: 4px solid var(--secondary-color1);
  

}
.button4 span::before{
  content: '';
  position: absolute !important;
  width: 8%;
  height: 500%;
  background  :  var(--background-color1) !important;
  top:50% !important;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg)  !important;
  transition: all .5s ease !important;
} 
.button4:hover span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%; 
  background:var(--secondary-color1) !important;

}
.one{
  display: flex; align-items: center; justify-content: center;
}

.navbar {
    width: 100%;
    height: 105px;
    background: linear-gradient( #023e8a, #5d9de6d9,#023e8a);
   padding: 2em, 5% !important;
   
}

.navbar-brand img {
    width: 90px;
    height: auto;
  
}
.navbar-toggler {
  border: none;
  outline: none;
}
.navbar-brand{
    color: var(--secondary-color)!important;
    font-size: larger;
    font-weight: bolder;
}

.contact-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-icons i {
  
    color: var(--secondary-color);
    font-size: 20px;
}

.contact-info {
    color: var(--text-color);
   
  font-size: 16px;
    font-weight: bold;
     
}
.social-icons a {
  color:var(--text2-color);
  margin-left: 10px;
  font-size: 22px;
}

/* ==========================
   RESPONSIVE NAVBAR
========================== */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
  .navbar {
      
    height: auto;
    padding: 1em;
  }
  .navbar-brand{
    font-size: 10px !important;
  }
  .navbar-brand img {
  
      width: 30px;
  }
  .navbar-toggler {
    background-color: var(--text2-color) !important;
      font-size: 10px !important;
  }
  .navbar-nav {
      flex-direction: column;
      text-align: center;
  }
  .contact-icons {
      flex-direction: column;
      align-items: center;
      gap: 5px;
  }
  .social-icons {
      justify-content: center;
      margin-top: 10px;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
  .navbar {
      padding: 10px;
      font-size: 8px !important;
  }
  .navbar-brand img {
      width: 50px;
    
  }
  .navbar-brand{
    color: var(--text-color) !important;
  }
  .navbar-toggler {
    background: var(--text2-color) !important;
      font-size: 8px;
      
  }
  .nav-item .nav-link a{
    font-size: 5px;
  }
  .navbar-nav {
    font-size: 5px !important;
      flex-direction: column;
      text-align: center;
  }
  .contact-icons {
      flex-direction: column;
      align-items: center;
      gap: 8px;
  }
  .social-icons {
      justify-content: center;
      margin-top: 10px;
  }
}


 /* navbar 2 */
.navbar2 { 
 background-color: var(--text2-color); 
  padding: 0.4em;
    
box-shadow: 0px 2px 4px rgba(6, 5, 14, 0.635);
    } 
    #navbar2 .navbar-nav .nav-item .nav-link {
        font-size: 18px;
         color: var(--background-color2);
        
    }
    #navbar2 .navbar-nav .nav-item .nav-link:hover {
        color: var(--text-color);
        padding: 10px;
        background-color: var(--secondary-color2);
        border-radius: 10px;
    }
    .dropdown-menu {
        background-color: var(--background-color1) !important;
        border-radius: 15px;
        
    }
    .dropdown-menu .dropdown-item{
        /* background-color: var(--secondary-color1); */
        color: var(--text-color);
    }
    .navbar-nav { 
    margin-left: auto; 
    display: flex;
    align-items: center;
    /* Align right */ } 
    .navbar-nav .nav-item { 
    margin-right: 30px; 
    }
    .navbar2 .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
     /* Responsive Styles */
     @media (max-width: 768px) {
      .navbar2 .navbar-nav {
          text-align: center;
      }
      .navbar2 .navbar-nav .nav-item {
          margin-bottom: 10px;
      }
      .navbar-toggler1{
        background-color: var(--background-color1);
      }
  }

  @media (max-width: 576px) {
      .navbar2 .navbar-nav .nav-link {
          font-size: 16px;
      }
  }
     /* hero image */
  
    .mySlides { 
         height: 442px !important;
        object-fit: cover;
        opacity: 1;
     
       
    }
    .custom-shape-divider-bottom-1741425093 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
  }
  
  .custom-shape-divider-bottom-1741425093 svg {
      position: relative;
      display: block;
      width: calc(147% + 1.3px);
      height: 53px;
      transform: rotateY(-180deg);
  }
  
  .custom-shape-divider-bottom-1741425093 .shape-fill {
      fill:var(--secondary-color2);
  }
  
/* Mobile View */
@media (min-width: 320px) and (max-width: 480px) {
    .mySlides { 
      height: 250px !important; /* Reduce height for small screens */
      object-fit: cover;
    }
  
    .custom-shape-divider-bottom-1741425093 svg {
      width: calc(150% + 1.3px);
      height: 30px; /* Reduce the divider height */
    }
  }
  
  /* Tablet View */
  @media (min-width: 500px) and (max-width: 1000px) {
    .mySlides { 
      height: 350px !important; /* Adjust height for tablets */
      object-fit: cover;
    }
  
    .custom-shape-divider-bottom-1741425093 svg {
      width: calc(147% + 1.3px);
      height: 45px; /* Slightly larger than mobile */
      margin-bottom: 250px !important;
    }
  }
  
.digital-marketing1 {
    text-align: center;
    color: var(--text-color);
    padding: 10px 0;
  }
  .box4 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    padding: 30px 0px;
    color: var(--text-color); 
  } 
   /* Mobile View */
@media (min-width: 320px) and (max-width: 480px) {
    .digital-marketing1 h1 {
      font-size: 22px; /* Reduce heading size */
      margin-bottom: 10px;
    }
  
    .box4 {
      flex-direction: column; /* Stack elements vertically */
      padding: 15px; /* Reduce padding */
      text-align: center;
    }
  
    .box4 p {
      font-size: 14px; /* Reduce text size */
      padding: 10px;
    }
  }
  
  /* Tablet View */
  @media (min-width: 500px) and (max-width: 1000px) {
    .digital-marketing1 h1 {
      font-size: 26px; /* Slightly smaller than desktop */
      margin-bottom: 15px;
    }
  
    .box4 {
      padding: 20px; /* Adjust padding for better spacing */
      text-align: justify;
    }
  
    .box4 p {
      font-size: 16px; /* Adjust text size */
      padding: 15px;
    }
  }
  
  /* image section */
  .digital-marketing2 {
    text-align: center;
    color: var(--text-color);
    padding: 10px 0;
    margin-top: -20px;
  }
  /* Mobile View */
@media (min-width: 320px) and (max-width: 480px) {
    .digital-marketing2 {
      padding: 5px 0; /* Reduce padding */
    }
  
    .box5 img {
      width: 90%; /* Make image responsive */
      height: auto;
      max-width: 300px; /* Limit max size */
    }
  }
  
  /* Tablet View */
  @media (min-width: 500px) and (max-width: 1000px) {
    .digital-marketing2 {
      padding: 10px 0;
    }
  
    .box5 img {
      width: 80%; /* Scale down for tablets */
      height: auto;
      max-width: 450px; /* Limit max width */
    }
  }
  
  /* footer section */
footer {
    color:var(--text-color)!important;
        background: linear-gradient(#0A192F,#1B4965) !important;
        opacity: 0.9;
        height: 400px !important;
       width: 100% !important;
       padding: 40px 0;
       margin-top: 40px;
     
      
       
     }
       
    .footer-box {
     
     width: 100% !important;   
       align-items: center;
         
         }
      
    
    .footer-box  ul li a{
     text-decoration: none;
    
    }
    .footer-box h1 {
       font-size: 20px;
       margin-bottom: 15px;
       color: var(--secondary-color1);
    }
    .footer-box p, .footer-box ul li {
       font-size: 15px!important;
       line-height: 1.6;
       
    }
    .footer-box ul {
     list-style: none;
     padding: 0;
    }
    
    .footer-box ul li {
     margin-bottom: 5px;
    }
    
    .footer-box ul li a {
     color:var(--secondary-color);
     text-decoration: none;
     transition: 0.3s;
    }
    
    .footer-box ul li a:hover {
     color: #ffa914;
    }
    
    .social-icons a {
     color: #ffa914;
     margin-right: 10px;
     font-size: 20px;
     transition: 0.3s;
    }
    
    .social-icons a:hover {
     color: white;
    }
    
    /* ===== BOTTOM BAR ===== */
    .bottom-bar {
     text-align: center;
     background: linear-gradient(135deg, #aedbd1, #0b40525b, #05a0d3);
     font-size: 15px !important;
     padding: 25px 5px;
     
     border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    /* ===== BACK TO TOP BUTTON ===== */
    .back-to-top {
     position: fixed;
     bottom: 8px !important;
     right: 20px;
     
     color: white !important;
     /* padding: 12px 15px; */
     border-radius: 50%;
     
     transition: 0.3s;
    }
    
    .back-to-top:hover {
     background-color: #03359a !important;
    }
    
    /* Fix footer margin issue */
    .footer-box {
     margin-top: 0 !important;
     padding-bottom: 20px;
    }
    
    /* Animate text smoothly for 2 seconds */
    h1, h2, h3, p {
     animation: fadeInText 2s ease-in-out;
    }
    
    @keyframes fadeInText {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
    }
    
    
    /* ===== RESPONSIVE DESIGN ===== */
    
           /* For Tablets (max-width: 768px) */
           @media (max-width: 768px) {
             footer {
                 padding: 30px 10px;
                 text-align: center;
             }
    
             .footer-box {
               text-align: center;
               padding: 30px;
           }
           .footer-box img {
               width: 80px;
               height: auto;
           }
           .footer-box h4, .footer-box h1 {
               font-size: 20px;
           }
           .footer-box p, .footer-box ul li {
               font-size: 14px!important;
           }
           .footer-box ul {
               padding: 0;
           }
           .footer-box ul li {
               margin-bottom: 8px;
           }
           .footer-box ul li a {
               font-size: 14px;
           }
           .social-icons {
               margin-top: 15px;
           }
           .social-icons a {
               font-size: 20px;
           }
           .bottom-bar {
               font-size: 14px;
               padding: 10px 0px;
           }
           .back-to-top {
               font-size: 18px;
           }
       }
         /* For Mobile Devices (max-width: 420px) */
         @media (max-width: 576px) {
             footer {
                 padding: 20px 5px;
                 text-align: center;
                 height: 780px !important;
             }
             .footer-box {
               text-align: center;
               padding: 20px;
           }
           .footer-box img {
               width: 70px;
               height: auto;
           }
    
           .footer-box h4, .footer-box h1 {
             font-size: 18px;
         }
         .footer-box p, .footer-box ul li {
             font-size: 12px!important;
         }
         .footer-box ul {
             padding: 0;
         }
         .footer-box ul li {
             margin-bottom: 10px;
         }
         .footer-box ul li a {
             font-size: 12px;
         }
         .social-icons {
             margin-top: 20px;
         }
         .social-icons a {
             font-size: 18px;
         }
         .bottom-bar {
           width: 100% !important;
           height: 80px !important;
           color: var(--text-color);
             font-size: 6px !important;
             padding: 8px 0px;
         }
         .back-to-top {
             font-size: 12px;
         }
     }